import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/addon-docs';

import TextAreaAutoGrow from '@/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow';

export const Template = (args, { argTypes }) => ({
  components: { TextAreaAutoGrow },
  props:      Object.keys(argTypes),
  template:   '<TextAreaAutoGrow v-bind="$props" />',
})

<Meta title="Components/Form/TextArea" />

# Text area
The text area represents a multi-line plain-text editing control, allows users to enter a sizeable amount of free-form text.


<Canvas>
  <Story
    name="TextArea"
    args={{
      placeholder: 'Enter text...'
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

<Source
  language='js'
  light
  format={false}
  code={`
     import TextAreaAutoGrow from '@/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow';
  `}
/>


### Props table
<ArgsTable of={TextAreaAutoGrow} />
